<template>
  <div class="msnmodel">
    <!-- 消息模板 -->
    <!-- 添加信息 -->
<template>
  <el-button class="btn" type="text" @click="open">添加</el-button>
  <!-- <edit-box :type="'add'"></edit-box> -->
</template>
     <!-- <edit-box :type="'add'"></edit-box> -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"

    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="ID" width="120"></el-table-column>
      <el-table-column prop="number" label="编号" width="120"></el-table-column>
      <el-table-column prop="title" label="标题" width="120"></el-table-column>
      <el-table-column prop="content" label="内容" show-overflow-tooltip></el-table-column>
      <el-table-column prop="condition" label="发送条件" width="120"></el-table-column>
      <el-table-column prop="genre" label="类型" width="120"></el-table-column>
      <el-table-column prop="templant" label="模板" width="120"></el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="deleteRow(scope.$index, tableData)"
            type="text"
            size="small"
          >移除</el-button>
        </template>
      </el-table-column>s
    </el-table>

  </div>
</template>

<script type="text/ecmascript-6">

export default {
  name: "",
  data() {
    return {
      tableData: [
        {
          id: "1",
          number: "王小虎",
          title: "你好",
          content: "上海市普陀区金沙江路 1518 弄",
          condition: "发送条件",
          genre: "类型",
          templant: "模板"
        },
        {
          id: "2",
          number: "王小虎",
          title: "你好",
          content: "上海市普陀区金沙江路 1518 弄",
          condition: "发送条件",
          genre: "类型",
          templant: "模板"
        }
      ],

      multipleSelection: []
    };
  },
  components: {

  },
  methods: {

      open() {
        const h = this.$createElement;
        this.$msgbox({
          title: '添加模板',
          message: h('p', null, [
            h('span', null, '请输入内容'),
            h('i', { style: 'color: teal' }, '')
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true;
              // instance.confirmButtonText = '执行中...';
              setTimeout(() => {
                done();
                setTimeout(() => {
                  instance.confirmButtonLoading = false;
                }, 300);
              }, );
            } else {
              done();
            }
          }
        }).then(action => {
          this.$message({
            type: 'info',
            message: '请输入内容'
          });
        });
      },
      deleteRow(index, rows) {
        rows.splice(index, 1);
      }
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    }
  }

</script>

<style lang="stylus" scoped>
.btn{
  margin-top:20px;
  width: 50px;
  height:50px;
  color:#fff;
  background-color :#2196F3;
}

</style>